<template>
  <BaseModal
    class="UpdateMenuManage-container"
    destroyOnClose
    v-on="$listeners"
    v-bind="$attrs"
    :width="800"
    title="资源信息"
    :confirmLoading="loading.isSubmit"
    okText="确定提交"
    @ok="handleSubmit"
  >
    <template slot="footer" v-if="pageType === 'look'">
      <a-button type="primary" @click="$emit('cancel')">关闭</a-button>
    </template>
    <a-spin :spinning="loading.isDetail">
    <a-form-model ref="ruleForm" :model="formInfo" :rules="rules">
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-model-item
            label="名称"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            prop="name"
          >
            <BaseInput :disabled="pageType === 'look'" placeholder="请输入名称" v-model="formInfo.name" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item
            label="编码"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            prop="code"
          >
            <BaseInput :disabled="pageType === 'look'" placeholder="请输入编码" v-model="formInfo.code" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-model-item
            label="类型"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            prop="type"
          >
            <a-select :disabled="pageType === 'look'" placeholder="请选择类型" v-model="formInfo.type">
              <a-select-option v-for="item in typeList" :key="item.key">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
          <a-col :md="12" :sm="12">
          <a-form-model-item
            label="排序号"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
          <BaseInputNumber :disabled="pageType === 'look'" :isInt="true" v-model="formInfo.rank" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
        <a-form-model-item
          label="路径"
          :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
          :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          prop="value"
        >
          <BaseInput :maxLength="255" :disabled="pageType === 'look'" placeholder="请输入路径" v-model.trim="formInfo.value" />
        </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
        <a-form-model-item
          label="描述"
          :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
          :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          prop="description"
        >
          <BaseInput :disabled="pageType === 'look'" placeholder="请输入描述" v-model="formInfo.description" />
        </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="isBusinessSearch" :gutter="24">
        <a-col :md="24" :sm="24">
        <a-form-model-item
          label="标示"
          :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
          :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          prop="queryType"
        >
          <a-select :disabled="pageType === 'look'" placeholder="请选择，多选" mode="multiple" v-model="formInfo.queryType">
            <a-select-option :key="0">业务执行</a-select-option>
            <a-select-option :key="1">业务管控</a-select-option>
          </a-select>
        </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    </a-spin>
  </BaseModal>
</template>

<script>
import { addResource, updateResource, getResourceDetail } from '@/api/system/menuAndAuth.js'
import BaseModal from '@/components/BaseModal'
import { BUSINESS_MENU_TYPE } from '@/config/businessConfig'

export default {
  name: 'UpdateMenuManage',
  components: {
    BaseModal,
  },
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      },
    },
    extraData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: {
        isSubmit: false,
        isDetail: false
      },
      typeList: [
        {
          key: '1',
          name: '菜单',
        },
        {
          key: '2',
          name: '按钮',
        },
        {
          key: '9',
          name: 'URL',
        },
      ],
      formInfo: {},
      rules: {
        name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
      },
    }
  },
  watch: {
    initData(data) {
      if (data && data.id) {
        this.formInfo = {
          ...data,
        }
        this.getResourceDetailReq(data.id)
      }else{
        this.formInfo = {}
      }
    },
  },
  computed: {
    pageType() {
      return this.initData.pageType || 'add'
    },
    isBusinessSearch(){
      return this.extraData.code?.indexOf(BUSINESS_MENU_TYPE[3].code.split('_')[1]) > -1
    }
  },
  methods: {
    async getResourceDetailReq(id) {
      this.loading.isDetail = true
      try {
        const params = {
          id
        }
        const res = await getResourceDetail(params)
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
          queryType: res.data.queryType ? res.data.queryType.split(',').map(i => Number(i)) : []
        }
      } catch(e) {
        console.error(e)
      }
      this.loading.isDetail = false
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        if (this.loading.isSubmit) return
        this.loading.isSubmit = true
        try {
          let value = this.formInfo.value && this.formInfo.value.replace && this.formInfo.value.replace(/\//g, '__') || ''
          value = value.replace(/\s/g, '')
          const params = {
            ...this.extraData,
            ...this.formInfo,
            ...(this.formInfo.queryType && this.formInfo.queryType.length > 0 ? {
              queryType: this.formInfo.queryType.join(','),
            } : {
              queryType: undefined
            }),
            parentId: this.extraData.parentId,
            value: value,
            rank: this.formInfo.rank || 0
          }
          const fn = this.pageType === 'add' ? addResource : updateResource
          const res = await fn(params)
          this.$message.success(this.pageType === 'add' ? '新增成功' : '编辑成功')
          this.$emit('confirm', params)
        } catch(e) {
          console.error(e)
        } finally {
          this.loading.isSubmit = false
        }
      })
    },
  },
}
</script>

<style>
</style>